{dede:field name='keywords'}玩转Dreamweaver,8：了解CSS层{/dede:field}
{dede:field name='description'}了解层叠样式表 层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件{/dede:field}
{dede:field name='title'}玩转Dreamweaver 8：了解CSS层叠样式表{/dede:field}
{dede:field name='writer'}{/dede:field}
{dede:field name='source'}{/dede:field}
{dede:field name='pubdate'}{/dede:field}
{dede:field name='body'}<H1>了解层叠样式表</H1>

<P>层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。</P>

<P>CSS 答应您控制 HTML 无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。</P>

<P>除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本四周的浮动文本等。</P>

<P>CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如 <CODE>P</CODE>、<CODE>H1</CODE>、类名或 ID），声明用于定义元素样式。在下面的示例中，<CODE>H1</CODE> 是选择器，介于括号 (<CODE>{}</CODE>) 之间的所有内容都是声明：</P><PRE>H1 {

<PRE>font-size:16 pixels;

font-family:Helvetica;

font-weight:bold;

</PRE>

}

</PRE>

<P>声明由两部分组成：属性（如 <CODE>font-family</CODE>）和值（如 <CODE>Helvetica</CODE>）。上面的 CSS 规则为 <CODE>H1</CODE> 标签创建了一个特定的样式：链接到此样式的所有 <CODE>H1</CODE> 标签的文本都将是 16 个像素大小、Helvetica 字体和粗体。</P>

<P>术语 cascading 表示向同一个元素应用多种样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个 CSS 规则来应用边距，然后将两者应用于页面上的同一个文本。所定义的样式向下"层叠"到您的 Web 页面上的元素，并最终创建您想要的设计。</P>

<P>CSS 的主要优点是它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。</P>

<P>在 Dreamweaver 中可以定义以下样式类型：</P>

<UL>

<LI>自定义 CSS 规则（也称为类样式）使您可以将样式属性应用于任何文本范围或文本块。（请参见应用类样式。） 

<LI>HTML 标签样式重定义特定标签（如 <CODE>h1</CODE>）的格式。创建或更改 <CODE>h1</CODE> 标签的 CSS 样式时，所有用 <CODE>h1</CODE> 标签设置了格式的文本都会立即更新。 

<LI>CSS 选择器样式（高级样式）重新定义特定元素组合的格式设置，或重新定义 CSS 答应的其他选择器表单的格式设置（例如，每当 <CODE>h2</CODE> 标题出现在表格单元格内时都应用选择器 <CODE>td h2</CODE>）。高级样式还可以重新定义包含特定 <CODE>id</CODE> 属性的标签的格式设置（例如，<CODE>#myStyle</CODE> 定义的样式可应用于包含属性值对 <CODE>id="myStyle"</CODE> 的所有标签）。 </LI></UL>

<P>CSS 规则可以位于以下位置：</P>

<P><STRONG>外部 CSS 样式表</STRONG>是一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。</P>

<P><STRONG>内部（或嵌入式）CSS 样式表</STRONG>是一系列包含在 HTML 文档文件头部分的 <CODE>style</CODE> 标签内的 CSS 规则。</P>

<P><STRONG>内联样式</STRONG>是在标签的特定实例中在整个 HTML 文档内定义的。</P>

<P>Dreamweaver 识别现有文档中定义的样式，只要这些样式符合 CSS 样式准则。</P>









<P><STRONG>提示</STRONG></P>



<P> </P>



<P>若要显示 Dreamweaver 中包含的 O'Reilly CSS 参考指南，请选择"帮助"&gt;"参考"，然后从"参考"面板的弹出式菜单中选择"O'Reilly CSS 参考"。

<p>
            <p align="center"> </p>{/dede:field}
{dede:field name='litpic'}{/dede:field}
